<script lang="ts" setup>
import { ref, watch } from 'vue'
import { formatTime, renderMaybeNull } from "@/utils";
import { shopGoodsCategoryTagPut } from '@/api'
import type { OPublishShopGoodsCategoryListGetItem } from '@/typed/response'
import { CATEGORY_STATUS, SHOP_GOODS_CATE_STATUS_MAP } from '@/const/shop.goods.cate'

interface IProps {
	show: boolean;
	data: OPublishShopGoodsCategoryListGetItem;
	width?: number | string;
}

const emit = defineEmits(['update:show'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})
const status = ref(0)

watch(() => props.show, async () => {
	status.value = props.data?.status || 0
})

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}

async function onUpdateStatus(status: number) {
	await updateData('status', status)
}

async function updateData(name: string, value: any) {
	if (!props.data) {
		return;
	}
	const {code} = await shopGoodsCategoryTagPut({
		...props.data,
		[name]: value
	})

	if (code === 200) {
		window.$message.success('修改成功')
	}
}

</script>

<template>
	<n-drawer
		:show="show"
		:width="width"
		close-on-esc
		@update:show="onUpdateShow"
	>
		<n-drawer-content closable>
			<template #header>
				<div class="drawerHeader">
					<div class="info">
						<div class="name">分类：{{ renderMaybeNull(data.name) }}</div>
						<div class="desc">描述：{{ renderMaybeNull(data.desc) }}</div>
					</div>
				</div>
			</template>
			<section>
				<div>
					<div class="infoItem">
						<n-image :height="240" :src="data.headImg" object-fit="cover" style="width:100%"/>
					</div>
					<n-divider/>
					<div class="infoItem">
						<div class="label">状态：</div>
						<div>
							<n-switch
								v-model:value="status"
								:checked-value="CATEGORY_STATUS.enable"
								:unchecked-value="CATEGORY_STATUS.disable"
								@update:value="onUpdateStatus"
							>
								<template #checked>
									{{ SHOP_GOODS_CATE_STATUS_MAP[CATEGORY_STATUS.enable] }}
								</template>
								<template #unchecked>
									{{ SHOP_GOODS_CATE_STATUS_MAP[CATEGORY_STATUS.disable] }}
								</template>
							</n-switch>
						</div>
					</div>
					<div class="infoItem">
						<div class="label">排序：</div>
						<div class="value">{{ data.seqno }}</div>
					</div>
					<div class="infoItem">
						<div class="label">创建时间：</div>
						<div class="value">{{ formatTime(data.createTime) }}</div>
					</div>
					<div class="infoItem">
						<div class="label">更新时间：</div>
						<div class="value">{{ formatTime(data.updateTime) }}</div>
					</div>
				</div>
			</section>
		</n-drawer-content>
	</n-drawer>
</template>

<style lang="less" scoped>

.drawerHeader {
	display: flex;
	align-items: stretch;

	:deep(.n-avatar) {
		flex-shrink: 0;
	}

	.info {
		width: 100%;
	}

	.desc {
		margin-top: 10px;
		font-size: 14px;
	}
}

.infoItem {
	display: flex;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 14px;

	.label {
		width: 100px;
		flex-shrink: 0;
	}

	.value {
		color: var(--n-close-icon-color-pressed);
	}
}
</style>
